<template>
    <div class="login">
        <div class="bg">
            <video autoplay loop muted id="bgvid" src="../../assets/video/bg3.mp4"
                style="width:100%; height:100%; object-fit: fill"></video>
        </div>
        <el-card class="login_center">
            <template #header>
                <div class="card_header">
                    <span>用户登录</span>
                </div>
            </template>
            <el-form :model="loginFormState" :rules="rules" ref="loginFormRef">
                <el-tabs stretch v-model="typeSelected">
                    <el-tab-pane label="学生" name="student"></el-tab-pane>
                    <el-tab-pane label="教师" name="teacher"></el-tab-pane>
                    <el-tab-pane label="管理员" name="account"></el-tab-pane>
                </el-tabs>
                <el-form-item prop="name">
                    <el-input v-model.trim="loginFormState.name" maxlength="32" placeholder="请输入账号" clearable>
                        <template #prefix>
                            <icons name="User"></icons>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="pwd">
                    <el-input v-model.trim="loginFormState.pwd" maxlength="16" show-password placeholder="请输入密码"
                        clearable @keyup.enter.exact="handleLogin">
                        <template #prefix>
                            <icons name="Lock"></icons>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" style="width: 100%" :loading="loginFormState.loading"
                        @click="handleLogin">登 录</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
import { getCurrentInstance, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { encode, decode } from "js-base64";
import Icons from "../../components/Icons.vue";
import { loginService } from "../../interfaces/service";
import { ElMessage } from "element-plus";

export default {
    components: { Icons },
    setup() {
        const { proxy } = getCurrentInstance();
        const router = useRouter();
        const store = useStore();

        const loginFormRef = ref();
        const typeSelected = ref('student');

        const loginFormState = reactive({
            name: "",
            pwd: "",
            loading: false,
        });

        const rules = {
            name: [{ required: true, message: "账号不能为空", trigger: "blur" }],
            pwd: [
                { required: true, message: "密码不能为空", trigger: "blur" },
                { min: 3, max: 16, message: "密码长度为5-16位", trigger: "blur" },
            ],
        };

        const handleLogin = () => {
            loginFormRef.value.validate(valid => {
                if (!valid) {
                    return false;
                }

                loginFormState.loading = true;

                let params = { name: loginFormState.name, pwd: loginFormState.pwd, type: typeSelected.value };

                loginService.login(params)
                    .then(res => {
                        loginFormState.loading = false;
                        if (res.success) {

                            const jwtToken = res.data.token;
                            const userInfo = res.data.user_info;

                            store.dispatch("setUser", userInfo);
                            if (!!jwtToken) {
                                sessionStorage.setItem("jwt", jwtToken);
                                sessionStorage.setItem("user", JSON.stringify(userInfo));

                                ElMessage.success("登录成功")
                                setTimeout(() => {
                                    const type = userInfo.type.toLowerCase();
                                    if (type === 'student') {
                                        router.replace("/student/process");
                                    }
                                    if (type === 'teacher') {
                                        router.replace("/teacher/approve");
                                    }
                                    if (type === 'account') {
                                        router.replace("/player");
                                    }
                                }, 1000);
                            }
                        }
                    })
                    .catch(error => {
                        console.log(error);
                        loginFormState.loading = false;
                    })

                // proxy.$axios
                // 	.post("/user/login", proxy.$qs.stringify(params))
                // 	.then(res => {
                // 		let { code, result_data, message } = res.data;
                // 		if (code == 1) {
                // 			console.log("login_success", result_data);
                // 			ElMessage.success("登录成功");
                // 		} else {
                // 			ElMessage.error("登录失败：" + message);
                // 		}
                // 	})
                // 	.catch(err => {
                // 		console.log("login err", err);
                // 		ElMessage.error("登录失败");
                // 	});
            });
        };

        return { typeSelected, loginFormRef, loginFormState, rules, handleLogin };
    },
};
</script>

<style lang="scss" scoped>
.bg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
    background-size: 100% 100%;
    filter: blur(5px);
}

.login {
    width: 100vw;
    height: 100vh;
    background-image: url("../../assets/img/login.jpg");
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;

    .login_center {
        z-index: 10;
        width: 396px;
        height: auto;
    }

    .card_header {
        font-size: 18px;
        text-align: center;
    }
}
</style>
